<template>
    <div class="ratings">
        <div class="overview">
            <div class="overview-left">
                <h1 class="score">{{ seller.score }}</h1>
                <div class="title">综合评分</div>
                <div class="rank">高于周边商家{{ seller.rankRate }}%</div>
            </div>
            <div class="overview-right">
                <div class="score-wrapper">
                    <span class="title">服务态度</span>
                    <star :size="36" :score="seller.serviceScore"></star>
                    <span class="score">{{ seller.serviceScore }}</span>
                </div>
                <div class="score-wrapper">
                    <span class="title">商品评分</span>
                    <star :size="36" :score="seller.foodScore"></star>
                    <span class="score">{{ seller.foodScore }}</span>
                </div>
                <div class="delivery-wrapper">
                    <span class="title">送达时间</span>
                    <span class="delivery">{{ seller.deliveryTime }}分钟</span>
                </div>
            </div>
        </div>
        <split></split>
        <div class="ratings-content" ref="ratings">
            <div>
                <ratingselect
                    :selectType="selectType"
                    :onlyContent="onlyContent"
                    :ratings="ratings"
                    @ratingType_select="ratingTypeSelect"
                    @content_toggle="contentToggle"
                ></ratingselect>
                <div class="rating-wrapper">
                    <ul>
                        <li v-show="needShow(rating.rateType, rating.text)" v-for="rating in ratings" class="rating-countent">
                            <div class="avatar"><img width="28" height="28" :src="rating.avatar" /></div>
                            <div class="content">
                                <h1 class="name">{{ rating.username }}</h1>
                                <div class="star-wrapper">
                                    <star :size="24" :score="rating.score"></star>
                                    <span class="delivery" v-show="rating.deliveryTime">{{ rating.deliveryTime }}分钟送达</span>
                                    <p class="text">{{ rating.text }}</p>
                                    <div class="recommend" v-show="rating.recommend.length">
                                        <span class="icon-thumb_up"></span>
                                        <span class="recommend-item" v-for="item in rating.recommend">{{ item }}</span>
                                    </div>
                                </div>
                                <div class="time">{{ rating.rateTime | dateFormat }}</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import star from '../star/star.vue';
import split from '../split/split.vue';
import ratingselect from '../ratingselect/ratingselect.vue';
import {formatdate} from '../../common/js/dateFormat.js';
import BScroll from 'better-scroll';
const ERR_OK = 0;
const ALL = 2;
export default {
   props:{
     seller:{
       type:Object
     }
   },
    filters:{
       dateFormat(time){
           return formatdate(time);
       }
   },
   data(){
     return{
       ratings:[],
       showFlag:false,
       selectType:ALL,
       onlyContent:true
     }

   },
   methods: {
     needShow(type,text){
         if(this.onlyContent&&!text){
             return false;
         }
         if(this.selectType === ALL){
             return true;
         }else{
             return type === this.selectType;
         }
     },
     ratingTypeSelect(type){
         this.selectType=type;
         this.$nextTick(() => {
             this.scroll.refresh();
         });

     },
     contentToggle(only_Content){
         this.onlyContent=only_Content;
         this.$nextTick(() => {
             this.scroll.refresh();
         });
     }
   },
   created() {
   	this.$http.get('/api/ratings').then((response) => {
        response = response.body;
        if(response.error===ERR_OK){
            this.ratings =response.data;
            this.$nextTick(() => {
                this.scroll = new BScroll(this.$refs.ratings,{
                    click:true,
                    probeType:3
                });
            });
        }
    })
   },
   components:{
     star,
     split,
     ratingselect
   }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.ratings
    position absolute
    top 174px
    bottom 0
    left 0
    width 100%   
    overflow hidden
    .overview
        display flex
        padding 18px 0
        .overview-left
            flex 0 0 137px
            width 137px
            padding 6px 0
            border-right 1px solid rgba(7, 17, 27, 0.1)
            text-align center
            @media only screen and (max-width: 320px)
                flex 0 0 120px
                width 120px
            .score
                line-height 28px
                font-size 24px
                color rgb(255, 153, 0)
            .title
                padding 6px 0 8px 0
                line-height 12px
                font-size 12px
                color rgb(7, 17, 27)
            .rank
                margin-bottom 18px
                padding-bottom 6px
                line-height 10px
                font-size 10px
                color rgb(147, 153, 159)
        .overview-right
            flex 1
            padding 6px 0 6px 24px
            @media only screen and (max-width: 320px)
                padding-left 6px
            .score-wrapper
                margin-bottom 8px
                line-height 16px
                font-size 0
                .title
                    display inline-block
                    vertical-align top
                    font-size 12px
                    color rgb(7, 17, 27)
                .star
                    display inline-block
                    margin 0 12px
                    vertical-align top
                .score
                    display inline-block
                    vertical-align top
                    font-size 12px
            .delivery-wrapper
                font-size 0
                .title
                    display inline-block
                    font-size 12px
                    color rgb(7, 17, 27)
                .delivery
                    margin-left 12px
                    line-height 16px
                    font-size 10px
                    color rgb(147, 153, 159)
    .ratings-content
        position absolute
        top 156px
        bottom 0
        left 0
        width 100%        
        overflow hidden
        .rating-countent
            display flex
            position relative
            padding 15px
            vertical-align top
            border-bottom 1px solid rgba(7, 17, 27, 0.1)
            .avatar
                padding-right 10px
                img
                    box-sizing border-box
                    border-radius 50%
            .content
                line-height 18px
                .star
                    margin-right 10px
                    display inline-block
                .delivery
                    line-height 16px
                    font-size 10px
                    color rgb(147, 153, 159)
                .text
                    line-height 22px
                .recommend
                    margin-top 10px
                    .icon-thumb_up
                        margin-right 4px
                        vertical-align top
                        color rgb(0, 160, 220)
                    .recommend-item
                        margin-right 9px
                        display inline-block
                        width 64px
                        height 15px
                        text-align center
                        font-size 10px
                        color rgb(147, 153, 159)
                        border 1px solid rgb(147, 153, 159)
                        white-space nowrap
                        overflow hidden
                        text-overflow ellipsis
                .time
                    position absolute
                    right 23px
                    top 20px
                    font-size 10px
                    color rgb(147, 153, 159)
</style>
